<template>
  <div>
    <div class="select">
      <div v-for="(item,key,index) in data" :key="index">
        <div class="title" @click="slideIn(item)">
          <span>{{item[choiceIndex[index]].name}}</span>
          <span></span>
        </div>
        <ul>
          <li :class="{'active':item.isShow}" v-for="(obj,i) in item" :key="i" @click="choice(obj,i,index,item)">
            <span>{{obj.name}}</span>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    data: {
      type: Object,
      default () {
        return {}
      }
    },
    choiceIndex: {
      type: Array,
      default () {
        return []
      }
    }
  },
  // data () {
  //   return {
  //     data: {},
  //     choiceIndex: [0, 0]
  //   }
  // },
  methods: {
    slideIn (item) {
      // 数据层次太多，没有触发render函数进行自动更新，需手动调用
      this.$forceUpdate()
      this.$set(item, 'isShow', !item.isShow)
      console.log(item.isShow)
    },
    choice (obj, i, index, item) {
      this.choiceIndex.splice(index, 1, i)
      this.slideIn(item)
      this.$emit('choice', obj)
    }
  },
  beforeMount () {
    this.$axios.get('https://api.myjson.com/bins/s2mcs').then(data => {
      for (let x in data) {
        data[x].isShow = false
      }
      this.data = data
    })
  }
}
</script>

<style scoped lang="scss">
.select {
  margin-top: 100px;
  display: flex;
  cursor: pointer;
  > div {
    margin-right: 15px;
  }
  .title {
    display: flex;
    align-items: center;
    padding: 0 15px;
    line-height: 32px;
    height: 32px;
    background-color: $positive;
    color: $light;
    border: 1px solid $positive;
    > span:last-child {
      margin: 3px 0 0 10px;
      border-right: 5px solid transparent;
      border-top: 6px solid $light;
      border-left: 5px solid transparent;
    }
  }
  ul {
    margin-top: 5px;
    box-shadow: 0 0 3px 0 RGBA(73, 187, 188, 0.3);
  }
  li {
    // border-bottom: 1px solid $stable02;
    text-align: center;
    line-height: 32px;
    // height: 32px;
    height: 0;
    overflow: hidden;
    color: $positive;
    transition: height 0.5s;
    &:hover {
      background-color: RGBA(73, 187, 188, 0.3);
      color: $light;
    }
    &.active {
      height: 32px;
    }
  }
}
</style>
